import React, {Component, PropTypes} from "react";
import classnames from "classnames";

class GoodsConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 1,
            item: {},
            specifiedList: [],
            specificationNo: 0
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.config.errorCode === 0) {
            this.setState({item: nextProps.config.data.goodsInfoForBuyVo});
            this.setState({specifiedList: nextProps.config.data.goodsInfoForBuyVo.specificationInfoVos});
            this.saveSpecifiedNo(nextProps.config.data.goodsInfoForBuyVo.specificationInfoVos);
        }
    }

    saveSpecifiedNo(spList) {
        let specificationNo = 0;
        let specificationName = '';
        spList.map((item) => {
            item.specificationDetailVos.map((subItem) => {
                if (subItem.checked) {
                    specificationNo = subItem.specificationNo;
                    specificationName = subItem.name;
                }
            })
        })
        if (specificationNo != this.state.specificationNo) {
            this.setState({specificationNo: specificationNo});
            this.props.setSpecificationNo(specificationNo, specificationName);
        }
    }

    renderSpecify() {
        if (this.state.specifiedList.length > 0) {
            return (
                <div>
                    {this.state.specifiedList.map((item, index) => {
                        return (
                            <div key={index}>
                                <p style={{marginLeft: '15px'}}>{item.gropuName}</p>
                                <div className="detail-boxContainer">
                                    {item.specificationDetailVos.map((subItem, subIndex) => {
                                        let className = subItem.checked ? "specifiedBox-selected" : "specifiedBox-unselected"
                                        return (
                                            <div className={className} key={subIndex}
                                                 onClick={this._changeSpecified.bind(this, subItem.specificationNo)}>
                                                {subItem.name}
                                            </div>
                                        );
                                    })
                                    }
                                </div>
                            </div>
                        )
                    })
                    }
                </div>
            );
        }
    }

    render() {
        const {show, item, config} = this.props;
        if (config.errorCode === 0) {
            const imgUrl = item.image ? item.image.split(",")[0] : item.image
            return (
                <div className={classnames("detail_pop_bg", {"show": show})}>
                    <div className="mall_pop_container">
                        <h3>
                            <div className="colsed" onClick={this._closed.bind(this)}></div>
                        </h3>
                        <div className="mall_pop_content">
                            <div className="photo"><img src={imgUrl} alt=""/></div>
                            <div className="content">
                                <div className="title">价格:¥{config.data.goodsInfoForBuyVo.price}</div>
                                <div className="intor">请选择规格属性</div>
                            </div>
                        </div>

                        {this.renderSpecify()}

                        <div>
                            <p style={{marginLeft: '15px'}}>数量</p>
                            <div className="detail-boxContainer">
                                <div className="inputBox">
                                    <button onClick={this._reduce.bind(this)} className="reduce">-</button>
                                    <input type="text" value={this.state.value} onChange={this._onChange.bind(this)}/>
                                    <button onClick={this._add.bind(this)} className="add">+</button>
                                </div>
                            </div>
                        </div>

                        <div className="detail-footer"></div>
                    </div>
                </div>
            );
        } else {
            return (<div></div>);
        }

    }

    _onChange(event) {
        this.setState({
            value: event.target.value,
        });
    }

    _closed() {
        this.props.closed();
        this.setState({
            value: 1
        })
    }

    _select(e) {
        this.setState({
            value: e.currentTarget.dataset.value,
        });
    }

    _reduce() {
        if (this.state.value > 1) {
            let number = this.state.value - 1;
            this.setState({
                value: Number(number)
            });
            this.props.setNumber(number);
        }
    }

    _add() {
        let number = this.state.value + 1;
        this.setState({
            value: Number(number)
        });
        this.props.setNumber(number);
    }

    _changeSpecified(specificationNo) {
        let params = {
            categoryCode: this.state.item.categoryCode,
            goodsNo: this.state.item.goodsNo,
            specificationNo: specificationNo
        };
        this.props.join(params);
        this.setState({
            value: 1
        })
    }
}

GoodsConfig.propTypes = {
    show: PropTypes.bool.isRequired,
    item: PropTypes.object.isRequired,
    config: PropTypes.object.isRequired,
    closed: PropTypes.func.isRequired,
};

export default GoodsConfig;